<template>
  <div class="pay">
    <el-table
    :data="userOrder"
    style="width: 100%"
    @current-change="getOrder">
    <el-table-column label="订单编号" width="220" prop="orderId">
      </el-table-column>
    <el-table-column label="手机号" width="180" prop="phone">
    </el-table-column>
    <el-table-column label="车牌号" width="160" prop="carNum">
    </el-table-column>
    <el-table-column label="车位位置" width="160" prop="location">
    </el-table-column>
    <el-table-column label="缴费金额/元" width="140" prop="amount">
    </el-table-column>
    <el-table-column label="订单状态" width="200" prop="state">
       <template slot-scope="scope">
        <!-- 根据state展示车位状态 -->
        <el-tag type="danger" v-if="scope.row.state == 1">已结束</el-tag>
        <el-tag type="success" v-if="scope.row.state == 0">进行中</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="缴费结算">
      <template slot-scope="scope">
        <!-- 判断是否为空闲状态 是否禁用停车按钮 -->
        <el-button type="success" icon="el-icon-check" circle @click="pay" :disabled="scope.row.state == 0 ? false : true">
    </el-button>
     </template>    
    </el-table-column>
  </el-table>
  </div>
</template>

<script>
import {getOrderByUser,pay} from '@/api/index'
export default {
    name:'PayIndex',
    data() {
      return {
        userOrder:{},
        garageId:'',
      }
    },
    methods: {
      //获取当前用户进行中的订单信息
      getData(){
        const userId = sessionStorage.getItem('userId')
        getOrderByUser(userId).then((res)=>{
          if(res.success){
            this.userOrder = res.data
          }
        })
      },
      getOrder(order){
        this.garageId = order.garageId
      },
      pay(){
        const userId = sessionStorage.getItem('userId')
        //进行按钮确认
        this.$confirm('您确定离开该车位吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //执行结算的操作
          pay(this.garageId,userId).then((res)=>{
            if(res.success){
              this.$message(
                {
                type: 'success',
                //缴费成功后，返回费用和时长信息
                message: "您本次停车时长为:" + res.data.hours + "小时," + "费用为:" + res.data.amount + "元"
              });
              // //执行成功后 重新请求API接口 刷新数据
              this.getData()
              //将用户余额进行更新
              this.$store.state.userDTO.balance -= res.data.amount
            }else{
              //缴费失败，返回相应的错误信息
              this.$message({
                type: 'info',
                message: res.errorMsg
              });  
                }})
        })
      }
    },
    mounted(){
      //挂载完毕开始加载用户订单信息
      this.getData()
    }
}
</script>

<style>
  .pay{
    margin-left: 260px;
    margin-top: 30px;
  }
</style>